<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="shibie">
      <div class="shibie_title">识别</div>
      <div class="shibie_content">
        在识别战术领域，主要聚焦在数据资产发现和处理，本报告重点对数据资源发现，数据资产识别，数据资产处理（分析），数据分类分级，数据资产打标作出描述。
      </div>
    </div>
    <!-- 二级标题 -->
    <div class="shibie2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>
    <!-- 评论区 -->
    <!-- <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
          style="color: red; cursor: pointer"
          v-if="item.username === commentForm.username"
          @click="del(item.id)"
          >删除</span
        >
      </div>
      <div>
        <el-input
        class="comment-input"
          type="textarea"
          v-model="commentForm.content"
          placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment">评论</el-button>

      <el-message
        v-if="errorMessage"
        :type="'error'"
        :message="errorMessage"
      ></el-message>
    </div> -->
    <Comment />
  </div>
</template>
  
  <script>
import request from "@/utils/request.js";
import Comment from "@/component/comment/index.vue";
import { ref } from "vue";
const drawer = ref(false);

export default {
  components:{
    Comment
  },
  data() {
    return {
      tableData: [
        {
          title: "数据资源发现",
          content: "",
          basis:
            "数据源发现是指对不同类型的数据资源发现的技术，是[战术：识别]的首要工作。数据资源发现非正式定义指：或通过网络流量分析并还原应用协议（被动的），或通过在业务应用嵌入监测锚点（主动的），或利用网络爬虫和扫描引擎探测并请求应用程序接口数据（主动的），以识别网络协议、应用接口、网页、文本、图片、视频、脚本等数据源。",
          main: "数据源发现系列技术主要包括网络流量分析、应用接口探测和业务锚点监测等。",
        },
        {
          title: "数据资产识别",
          basis:
            "数据资产，是指拥有数据权属（勘探权、使用权、所有权）、有价值、可计量、可读取的网络空间中的数据集。",
          main: "数据资产识别的主要实现方式为利用自动化技术手段对企业数据进行筛选与分析，找出符合数据资产定义的数据集。数字资产的识别技术主要包含关键字、正则表达式、基于文件属性识别、精准数据比对、指纹识别技术和支持向量网络等。",
        },
        {
          title: "数据资产处理（分析）",
          basis:
            "数据资产处理（分析）指在数据清洗的基础上，针对已采集和识别的重要数据资产和个人信息进行合规和安全处理。",
          main: "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全性分析、合规性分析、重要性（敏感性）分析等。",
        },
        {
          title: "数据分类分级",
          basis:
            "数据分类分级需要分两个步骤来开展。数据分类指根据组织数据的属性或特征，将其按照一定的原则和方法进行区分和分类，并建立起一定的分类体系和排列顺序，以便更好地管理和使用组织数据的过程。数据分级指按照一定的分级原则对分类后的数据进行定级，从而为数据的开放和共享安全策略提供支撑。",
          main: "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全性分析、合规性分析、重要性（敏感性）分析等。",
        },
        {
          title: "数据资产打标",
          basis:
            "数据资产打标指在生产过程中，依据国家相关规定或企业自身管理需求，在产品上通过各种技术进行文字、图片等标识，产品并不局限于实体。",
          main: "数据资产打标的主要实现方式包括：基于关键字的敏感数据打标：通过字段名称，注释信息；基于正则的敏感数据打标：通过样本数据；基于机器学习的敏感数据打标：整个表中所有字段名，样本数据，与其他表的相似度进行训练；对账号字段打标等。",
        },
      ],
      comments: [],
      pageId: 1,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);
      console.log(comments);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
            .delete(`/comments/${commentId}`)
            .then(() => {
              this.$message.success("评论删除成功");
              this.load(); // 重新加载评论列表
            })
            .catch((error) => {
              console.error("删除评论失败:", error);
              this.$message.error("删除评论失败");
            });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
        .get("/comments/" + this.pageId)
        .then((res) => {
          this.comments = res.data;
        })
        .catch((error) => {
          console.error("加载评论失败:", error);
        });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
        .post("/comments/" + this.pageId, {
          content: this.commentForm.content,
          username: this.commentForm.username,
          userId: this.commentForm.userId,
        })
        .then(() => {
          this.$message.success("评论成功");
          this.commentForm.content = "";
          this.load();
        })
        .catch((error) => {
          console.error("提交评论失败:", error);
          this.$message.error("提交评论失败");
        });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .shibie {
    width: 100%;
    padding: 30px;
    .shibie_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .comments-section{
    padding: 20px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item{
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input{
      margin: 15px 0;
    }
    .comment-button{
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }

}
</style>;
  